<template>
    <el-card class="test_log">
        <div
           v-html="logStr"
           class="log_input"
           ref="logDiv"
         >
        </div>
    </el-card>
</template>
<script>
    import {ref ,reactive,nextTick} from 'vue'
    export default {
        props:['logStr'],
        setup(){  
            let logDiv = ref(null);
            let logStr = ref('');
            //追加到日志中
            function appendLog(str,isRed){
                logStr.value+= `<br/><p ${isRed?'style="color:red"':''}>${str}</p><p style="color:purple;text-align:right;">${new Date().toLocaleTimeString()}</p>`;
                nextTick(()=>{logDiv.value.scrollTop = logDiv.value.scrollHeight - logDiv.value.offsetHeight});
            }
            return{
                logDiv,logStr,appendLog
            }
        }
    }
</script>
<style scoped>
.test_log{
    width: 20vw;
    height: 50vh;
    position: absolute;
    top: 90px;
    right: 1vh;
    
}
.log_input{
    border: 1px solid  rgba(146, 107, 107, 0.906);
    width: 100%;
    height: 45vh;
    border-radius: 5px;
    padding: 2px;
    overflow: auto;
    scroll-behavior: smooth;
}
.log_input::-webkit-scrollbar {
    width: 5px;
    background-color: rgba(139, 133, 133, 0.662);
}
.log_input::-webkit-scrollbar-thumb{
    background-color: rgb(22, 17, 17);
}
</style>